<template>
	<view class="index-page">
		<view class="form-box mt-20">
			<view class="form-item">
				<view class="label-box">
					<text class="required">*</text>
					<text class="label">举报人真实姓名</text>
					<text class="tibetan">（ཐེར་འདོན་བྱེད་མཁན་གྱི་རུས་མིང་།）</text>
				</view>
				<view class="input-box flex items-center">
					<input class="flex-1" type="text" v-model="form.true_name"
						placeholder="ཐེར་འདོན་བྱེད་མཁན་གྱི་རུས་མིང་།">
				</view>
			</view>
			<view class="form-item">
				<view class="label-box">
					<text class="required">*</text>
					<text class="label">银行卡号</text>
					<text class="tibetan">（དངུལ་ཁང་གི་བྱང་བུའི་ཨང་གྲངས་།）</text>
				</view>
				<view class="input-box flex items-center">
					<input class="flex-1" type="text" v-model="form.bank_number"
						placeholder="དངུལ་ཁང་གི་བྱང་བུའི་ཨང་གྲངས་།">
				</view>
			</view>
			
			<view class="form-item">
				<view class="label-box">
					<text class="required">*</text>
					<text class="label">开户行</text>
					<text class="tibetan">（ཐོ་ཁུངས་དངུལ་ཁང་།）</text>
				</view>
				<view class="input-box flex items-center">
					<input class="flex-1" type="text" v-model="form.bank_name"
						placeholder="ཐོ་ཁུངས་དངུལ་ཁང་།">
				</view>
			</view>
			<view class="form-item">
				<view class="label-box">
					<text class="label">填写的姓名、银行卡号、开户行将用于发放举报奖励，填写错误或不正确填写视为放弃奖励，请务必仔细核对本人信息。</text>
					<text class="tibetan">（རུས་མིང་དང་དངུལ་ཁང་བྱང་བུའི་ཨང་གྲངས་ ཐོ་ཁུངས་དངུལ་ཁང་གི་ཆ་འཕྲིན་བཅས་ནི་ཐེར་འདོན་བྱ་དགའ་བསྐུར་བའི་བརྒྱུད་ལམ་གཙོ་བོ་ཡིན་པས་རང་ཉིད་ཀྱི་ཆ་འཕྲིན་ནོར་བའམ་མ་དག་པ་ཡིན་ཚེ་བྱ་དགའི་གོ་སྐབས་དོར་བར་བརྩི་རྒྱུ་ཡིན་པས་ངེས་པར་དུ་རང་ཉིད་ཀྱི་ཆ་འཕྲིན་ཁག་ལ་ཞིབ་བསྡུར་ནན་མོ་བྱེད་དགོས་།）</text>
				</view>
				
			</view>
		</view>

		<view class="button-box">
			<button class="btn" @click="completedForm">提交(འབུལ་བ)</button>
		</view>
		<u-picker :show="categoryShow" :columns="categoryColumns" itemHeight="56" @cancel="categoryShow = false"
			@confirm="categoryConfirm"></u-picker>
		<u-picker :show="sourceShow" :columns="sourceColumns" @cancel="sourceShow = false" @confirm="sourceConfirm">
		</u-picker>
	</view>
</template>

<script>
	const util = require('../../common/util.js');
	const data = require('../../common/data.js');
	export default {
		data() {
			return {
				this_user_info:[],
				form: {
					true_name:'',
					bank_number: '',
					bank_name: '',
				},
			}
		},
		onLoad() {
			this.loadData();
		},
		methods: {
			loadData: function() {
				let that = this;
				var requsetData = {};
				util.requestPost(
					'/User/index',
					requsetData,
					function(res) {
						that.form.true_name = res.data.this_user_info.true_name;
						that.form.bank_number = res.data.this_user_info.bank_number;
						that.form.bank_name = res.data.this_user_info.bank_name;
					},
					'', {
						isShowLoading: false
					}
				);
			},
			completedForm() {
				let that = this;
				var requsetData = {};
				requsetData.form = JSON.stringify(that.form);
				util.requestPost(
					'/Index/authInfoAction',
					requsetData,
					function(res) {
						uni.showModal({
							title: '提示',
							content: res.msg,
							showCancel: false,
							success: function(res) {
								uni.navigateBack();
							}
						});
					},
					'', {
						isShowLoading: false
					}
				);
			},
		
		}
	}
</script>

<style lang="scss">
	.index-page {
		min-height: 100%;
		background-color: $bg-color;

		.phone-box {
			padding: 20rpx 36rpx;
			background-color: #fff;

			.text {
				font-size: 30rpx;

				.label {
					color: $primary-color;
					text-align: center;
				}

				.subtitle {
					font-size: 24rpx;
					margin-top: 4rpx;
				}

				.number {
					margin-left: 20rpx;
				}
			}

			.btn {
				margin: 0;
				color: #fff;
				background-color: $primary-color;

				.right {
					margin-left: 4rpx;
					font-size: 24rpx;
				}
			}
		}

		.form-box {
			padding: 30rpx 36rpx;
			background-color: #fff;

			.form-item {
				&:not(:last-of-type) {
					margin-bottom: 32rpx;
				}

				.label-box {
					.required {
						color: $red-color;
					}

					.label {
						font-size: 30rpx;
						font-weight: bold;
					}

					.tibetan {
						font-size: 24rpx;
					}
				}

				.input-box {
					margin-top: 20rpx;
					padding: 28rpx;
					border-radius: 8rpx;
					background-color: #f8f8f8;

					.input-placeholder {
						font-size: 22rpx;
					}
				}

				.upload-default {
					width: 470rpx;
					height: 216rpx;
					border-radius: 8rpx;
					background-color: #f8f8f8;

					.text {
						margin-top: 16rpx;
						color: #888;
						font-size: 30rpx;
						text-align: center;

						.tibetan {
							font-size: 24rpx;
							margin-top: 4rpx;
						}
					}
				}
			}
		}

		.button-box {
			padding: 40rpx 70rpx;

			.btn {
				color: #fff;
				font-size: 32rpx;
				height: 86rpx;
				line-height: 86rpx;
				border-radius: 86rpx;
				background-color: $primary-color;
			}
		}
	}
</style>
